<template>
  <div class="database-operations-container">
    <div class="database-operations-header">
      <h3>数据库操作</h3>
      <div class="connection-selector">
        <el-alert
          title="数据库连接信息由项目设置决定"
          type="info"
          description="如需修改，请到项目详情页设置数据库信息"
          show-icon
          :closable="false"
        />
      </div>
    </div>
    
    <div class="db-quick-actions">
      <el-button-group>
        <el-button type="primary" size="small" @click="handleNewQuery" :loading="isLoading">
          <el-icon><Plus /></el-icon> 新建查询
        </el-button>
        <el-button type="success" size="small" @click="showTableDialog" :loading="isLoading">
          <el-icon><List /></el-icon> 浏览表结构
        </el-button>
        <el-button type="warning" size="small" @click="showUpdateDialog" :loading="isLoading">
          <el-icon><Edit /></el-icon> 执行更新
        </el-button>
      </el-button-group>
    </div>
    
    <el-tabs v-model="activeTab" class="db-tabs" @tab-click="handleTabClick">
      <el-tab-pane label="连接状态" name="status">
        <div class="db-status" v-loading="isLoading">
          <el-alert
            v-if="statusError"
            :title="statusError"
            type="error"
            show-icon
            :closable="false"
          >
            <template v-if="statusError.includes('连接失败') || statusError.includes('数据库连接错误')" #default>
              <p>解决方案：</p>
              <ul>
                <li>确保数据库服务器正在运行</li>
                <li>检查连接信息（主机、端口、用户名、密码等）是否正确</li>
                <li>检查网络连接是否正常</li>
              </ul>
              <div class="config-action">
                <el-button type="primary" size="small" @click="showConnectionDialog">
                  配置连接
                </el-button>
              </div>
            </template>
          </el-alert>
          <div v-else-if="connectionStatus" class="status-info">
            <el-descriptions :column="1" border>
              <el-descriptions-item label="连接名称">{{ connectionStatus.name }}</el-descriptions-item>
              <el-descriptions-item label="数据库类型">{{ connectionStatus.type }}</el-descriptions-item>
              <el-descriptions-item label="主机">{{ connectionStatus.host }}</el-descriptions-item>
              <el-descriptions-item label="数据库名称">{{ connectionStatus.database }}</el-descriptions-item>
              <el-descriptions-item label="状态">
                <el-tag :type="connectionStatus.connected ? 'success' : 'danger'">
                  {{ connectionStatus.connected ? '已连接' : '未连接' }}
                </el-tag>
              </el-descriptions-item>
              <el-descriptions-item v-if="connectionStatus.version" label="数据库版本">
                {{ connectionStatus.version }}
              </el-descriptions-item>
            </el-descriptions>
          </div>
          <el-empty v-else description="暂无连接状态信息" />
        </div>
      </el-tab-pane>
      
      <el-tab-pane label="表结构" name="tables">
        <div class="db-tables" v-loading="isLoading">
          <div class="action-bar">
            <el-select v-model="selectedTable" placeholder="选择表" size="small" @change="loadTableStructure">
              <el-option
                v-for="table in tables"
                :key="table.name"
                :label="table.name"
                :value="table.name"
              />
            </el-select>
            <el-button size="small" @click="loadTables" :loading="isLoading">
              刷新表列表
            </el-button>
          </div>
          
          <el-table v-if="selectedTable && tableStructure.length" :data="tableStructure" stripe style="width: 100%">
            <el-table-column prop="column_name" label="列名" min-width="120" />
            <el-table-column prop="data_type" label="数据类型" min-width="120" />
            <el-table-column prop="is_nullable" label="可为空" min-width="80">
              <template #default="scope">
                <el-tag :type="scope.row.is_nullable === 'YES' ? 'success' : 'danger'" size="small">
                  {{ scope.row.is_nullable === 'YES' ? '是' : '否' }}
                </el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="column_key" label="键类型" min-width="100">
              <template #default="scope">
                <el-tag v-if="scope.row.column_key === 'PRI'" type="danger" size="small">主键</el-tag>
                <el-tag v-else-if="scope.row.column_key === 'UNI'" type="warning" size="small">唯一键</el-tag>
                <el-tag v-else-if="scope.row.column_key === 'MUL'" type="info" size="small">索引</el-tag>
                <span v-else>-</span>
              </template>
            </el-table-column>
            <el-table-column prop="column_default" label="默认值" min-width="120" show-overflow-tooltip />
            <el-table-column prop="extra" label="额外属性" min-width="120" show-overflow-tooltip />
          </el-table>
          <el-empty v-else-if="tables.length > 0" description="请选择一个表" />
          <el-empty v-else description="暂无表结构信息" />
        </div>
      </el-tab-pane>
      
      <el-tab-pane label="查询历史" name="queryHistory">
        <div class="query-history" v-loading="isLoading">
          <el-empty v-if="!queryHistory.length" description="暂无查询历史" />
          <el-timeline v-else>
            <el-timeline-item
              v-for="(query, index) in queryHistory"
              :key="index"
              :timestamp="query.executed_at"
              :type="index === 0 ? 'primary' : ''"
            >
              <div class="query-item" @click="showQueryDetails(query)">
                <el-tag size="small" :type="getQueryTypeTag(query.query_type)">{{ getQueryTypeText(query.query_type) }}</el-tag>
                <div class="query-text">{{ truncateSql(query.sql) }}</div>
                <div class="query-status">
                  <el-tag size="small" :type="query.status === 'success' ? 'success' : 'danger'">
                    {{ query.status === 'success' ? '成功' : '失败' }}
                  </el-tag>
                  <span v-if="query.rows_affected !== undefined">{{ query.rows_affected }} 行受影响</span>
                </div>
              </div>
            </el-timeline-item>
          </el-timeline>
        </div>
      </el-tab-pane>
    </el-tabs>
    
    <!-- 新建查询对话框 -->
    <el-dialog
      v-model="queryDialogVisible"
      title="SQL查询"
      width="80%"
      :close-on-click-modal="false"
      :destroy-on-close="false"
    >
      <div class="query-editor-container">
        <div class="editor-toolbar">
          <el-button type="primary" size="small" @click="executeCurrentQuery" :loading="isExecuting">
            执行查询
          </el-button>
          <el-button type="info" size="small" @click="clearQueryEditor">
            清空
          </el-button>
        </div>
        <div class="sql-editor">
          <el-input
            v-model="currentQuery"
            type="textarea"
            :rows="8"
            placeholder="请输入SQL查询语句..."
            resize="vertical"
          />
        </div>
        <div v-if="queryResult" class="query-result">
          <div class="result-header">
            <h4>查询结果</h4>
            <div v-if="queryResult.rowCount !== undefined" class="result-summary">
              {{ queryResult.rowCount }} 行数据
              <span v-if="queryResult.executionTime">
                ({{ queryResult.executionTime }} ms)
              </span>
            </div>
          </div>
          <el-table 
            v-if="queryResult.data && queryResult.data.length" 
            :data="queryResult.data" 
            border 
            style="width: 100%"
            height="300"
          >
            <el-table-column
              v-for="column in queryResult.columns"
              :key="column"
              :prop="column"
              :label="column"
              min-width="150"
              show-overflow-tooltip
            />
          </el-table>
          <el-empty v-else-if="queryResult.data" description="查询没有返回数据" />
          <el-alert
            v-if="queryResult.error"
            :title="queryResult.error"
            type="error"
            show-icon
          />
        </div>
      </div>
    </el-dialog>
    
    <!-- 浏览表结构对话框 -->
    <el-dialog
      v-model="tableDialogVisible"
      title="数据库表结构"
      width="80%"
    >
      <div class="table-browser">
        <div class="table-selection">
          <el-select v-model="selectedTableForBrowse" placeholder="选择表" @change="browseTable">
            <el-option
              v-for="table in tables"
              :key="table.name"
              :label="table.name"
              :value="table.name"
            />
          </el-select>
        </div>
        <div class="table-structure" v-loading="isLoadingTableData">
          <el-table v-if="tableData.length" :data="tableData.slice(0, 100)" border style="width: 100%">
            <el-table-column
              v-for="column in tableColumns"
              :key="column"
              :prop="column"
              :label="column"
              min-width="150"
              show-overflow-tooltip
            />
          </el-table>
          <el-alert
            v-if="tableData.length > 100"
            title="显示前100条记录"
            type="info"
            :closable="false"
          />
          <el-empty v-else-if="selectedTableForBrowse" description="表中没有数据" />
          <el-empty v-else description="请选择一个表" />
        </div>
      </div>
    </el-dialog>
    
    <!-- 执行更新对话框 -->
    <el-dialog
      v-model="updateDialogVisible"
      title="执行数据库更新"
      width="60%"
      :close-on-click-modal="false"
    >
      <el-form :model="updateForm" ref="updateFormRef" :rules="updateRules">
        <el-form-item label="SQL语句" prop="sql">
          <el-input
            v-model="updateForm.sql"
            type="textarea"
            :rows="5"
            placeholder="请输入SQL更新语句..."
          />
        </el-form-item>
        <div class="dialog-tip warning-tip">
          注意：请确认SQL语句正确无误，此操作可能会修改数据库内容
        </div>
      </el-form>
      <template #footer>
        <span>
          <el-button @click="updateDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="handleExecuteUpdate" :loading="isExecuting">
            执行更新
          </el-button>
        </span>
      </template>
    </el-dialog>
    
    <!-- 查询详情对话框 -->
    <el-dialog
      v-model="queryDetailsDialogVisible"
      title="查询详情"
      width="60%"
    >
      <div v-if="selectedQuery" class="query-details">
        <el-descriptions :column="1" border>
          <el-descriptions-item label="执行时间">{{ selectedQuery.executed_at }}</el-descriptions-item>
          <el-descriptions-item label="查询类型">
            <el-tag :type="getQueryTypeTag(selectedQuery.query_type)">
              {{ getQueryTypeText(selectedQuery.query_type) }}
            </el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="状态">
            <el-tag :type="selectedQuery.status === 'success' ? 'success' : 'danger'">
              {{ selectedQuery.status === 'success' ? '成功' : '失败' }}
            </el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="SQL">
            <pre>{{ selectedQuery.sql }}</pre>
          </el-descriptions-item>
          <el-descriptions-item v-if="selectedQuery.rows_affected !== undefined" label="影响行数">
            {{ selectedQuery.rows_affected }}
          </el-descriptions-item>
          <el-descriptions-item v-if="selectedQuery.error" label="错误信息">
            <div class="error-message">{{ selectedQuery.error }}</div>
          </el-descriptions-item>
        </el-descriptions>
      </div>
    </el-dialog>
    
    <!-- 操作结果通知 -->
    <el-dialog
      v-model="resultDialogVisible"
      :title="resultDialogTitle"
      width="50%"
    >
      <div v-if="operationResult && operationResult.success" class="result-success">
        <el-icon class="result-icon success"><CircleCheck /></el-icon>
        <div class="result-message">{{ operationResult.message }}</div>
      </div>
      <div v-else-if="operationResult" class="result-error">
        <el-icon class="result-icon error"><CircleClose /></el-icon>
        <div class="result-message">{{ operationResult.message }}</div>
      </div>
      <div v-if="operationResult && operationResult.details" class="result-details">
        <div v-if="operationResult.details.rowsAffected !== undefined" class="result-info">
          <h4>影响行数: {{ operationResult.details.rowsAffected }}</h4>
        </div>
        <div v-if="operationResult.details.error" class="result-error-details">
          <h4>错误详情:</h4>
          <pre>{{ operationResult.details.error }}</pre>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { ref, reactive, onMounted, computed, onUnmounted, watch } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import { 
  getDatabaseStatus, 
  executeQuery, 
  getTableStructure, 
  getTables, 
  executeUpdate,
  createTable,
  getProjectDatabaseConnections,
  createDatabaseConnection,
  testDatabaseConnection
} from '../api/dbService';
import { Plus, Edit, List, CircleCheck, CircleClose } from '@element-plus/icons-vue';

export default {
  name: 'DatabaseOperations',
  components: {
    Plus,
    Edit,
    List,
    CircleCheck,
    CircleClose
  },
  props: {
    taskId: {
      type: Number,
      required: true
    },
    projectId: {
      type: Number,
      default: null
    }
  },
  emits: ['db-operation-completed'],
  setup(props, { emit }) {
    // 数据
    const isLoading = ref(false);
    const isExecuting = ref(false);
    const tables = ref([]);
    const selectedTable = ref(null);
    const tableStructure = ref([]);
    const queryHistory = ref([]);
    const currentQuery = ref('');
    const queryResult = ref(null);
    const tableData = ref([]);
    const tableColumns = ref([]);
    const selectedTableForBrowse = ref(null);
    const selectedQuery = ref(null);
    const activeTab = ref('status');
    const queryDialogVisible = ref(false);
    const tableDialogVisible = ref(false);
    const updateDialogVisible = ref(false);
    const queryDetailsDialogVisible = ref(false);
    const resultDialogVisible = ref(false);
    const resultDialogTitle = ref('操作结果');
    const operationResult = ref(null);
    const isLoadingTableData = ref(false);
    const statusError = ref('');
    const connectionStatus = ref(null);
    
    // UI控制
    const isTestingConnection = ref(false);
    const isSavingConnection = ref(false);
    
    // 表单
    const updateForm = ref({ sql: '' });
    
    // 表单验证规则
    const updateRules = {
      sql: [
        { required: true, message: '请输入SQL语句', trigger: 'blur' }
      ]
    };
    
    // 加载表列表
    const loadTables = async () => {
      isLoading.value = true;
      try {
        const response = await getTables(props.taskId);
        if (response.data.success) {
          tables.value = response.data.tables || [];
          if (tables.value.length > 0 && activeTab.value === 'tables') {
            if (!tables.value.find(t => t.name === selectedTable.value)) {
              selectedTable.value = tables.value[0].name;
              await loadTableStructure();
            }
          }
        } else {
          ElMessage.error(response.data.message || '获取表列表失败');
          tables.value = [];
        }
      } catch (error) {
        console.error('获取表列表失败:', error);
        ElMessage.error(`获取表列表失败: ${error.message || '未知错误'}`);
        tables.value = [];
      } finally {
        isLoading.value = false;
      }
    };
    
    // 加载表结构
    const loadTableStructure = async () => {
      if (!selectedTable.value) {
        return;
      }
      isLoading.value = true;
      try {
        const response = await getTableStructure(props.taskId, selectedTable.value);
        if (response.data.success) {
          tableStructure.value = response.data.structure || [];
        } else {
          ElMessage.error(response.data.message || '获取表结构失败');
          tableStructure.value = [];
        }
      } catch (error) {
        console.error('获取表结构失败:', error);
        ElMessage.error(`获取表结构失败: ${error.message || '未知错误'}`);
        tableStructure.value = [];
      } finally {
        isLoading.value = false;
      }
    };
    
    // 浏览表数据
    const browseTable = async () => {
      if (!selectedTableForBrowse.value) {
        return;
      }
      isLoadingTableData.value = true;
      tableData.value = [];
      tableColumns.value = [];
      try {
        const sql = `SELECT * FROM ${selectedTableForBrowse.value} LIMIT 100`;
        const response = await executeQuery(props.taskId, sql);
        if (response.data.success) {
          tableData.value = response.data.data || [];
          tableColumns.value = response.data.columns || [];
          if (!queryHistory.value.find(q => q.sql === sql)) {
            queryHistory.value.unshift({
              sql,
              executed_at: new Date().toLocaleString(),
              status: 'success',
              query_type: 'select',
              rows_affected: tableData.value.length
            });
          }
        } else {
          ElMessage.error(response.data.message || '获取表数据失败');
        }
      } catch (error) {
        console.error('获取表数据失败:', error);
        ElMessage.error(`获取表数据失败: ${error.message || '未知错误'}`);
      } finally {
        isLoadingTableData.value = false;
      }
    };
    
    // 新建查询
    const handleNewQuery = () => {
      currentQuery.value = '';
      queryResult.value = null;
      queryDialogVisible.value = true;
    };
    
    // 执行当前查询
    const executeCurrentQuery = async () => {
      if (!currentQuery.value.trim()) {
        return;
      }
      isExecuting.value = true;
      queryResult.value = null;
      try {
        const response = await executeQuery(props.taskId, currentQuery.value);
        if (response.data.success) {
          queryResult.value = {
            data: response.data.data || [],
            columns: response.data.columns || [],
            rowCount: response.data.data?.length || 0,
            executionTime: response.data.execution_time
          };
          queryHistory.value.unshift({
            sql: currentQuery.value,
            executed_at: new Date().toLocaleString(),
            status: 'success',
            query_type: getQueryType(currentQuery.value),
            rows_affected: queryResult.value.rowCount
          });
          emit('db-operation-completed', {
            success: true,
            operation: 'query',
            sql: currentQuery.value,
            rowCount: queryResult.value.rowCount
          });
        } else {
          queryResult.value = {
            error: response.data.message || '查询执行失败'
          };
          queryHistory.value.unshift({
            sql: currentQuery.value,
            executed_at: new Date().toLocaleString(),
            status: 'failed',
            query_type: getQueryType(currentQuery.value),
            error: response.data.message
          });
        }
      } catch (error) {
        console.error('执行查询失败:', error);
        queryResult.value = {
          error: `执行查询失败: ${error.message || '未知错误'}`
        };
        queryHistory.value.unshift({
          sql: currentQuery.value,
          executed_at: new Date().toLocaleString(),
          status: 'failed',
          query_type: getQueryType(currentQuery.value),
          error: error.message
        });
      } finally {
        isExecuting.value = false;
      }
    };
    
    // 执行更新SQL
    const handleExecuteUpdate = async () => {
      if (!updateForm.value.sql.trim()) {
        return;
      }
      try {
        await ElMessageBox.confirm(
          '确定要执行此SQL语句吗？此操作可能会修改数据库内容。',
          '确认操作',
          {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }
        );
        isExecuting.value = true;
        const response = await executeUpdate(props.taskId, updateForm.value.sql);
        resultDialogTitle.value = 'SQL执行结果';
        if (response.data.success) {
          operationResult.value = {
            success: true,
            message: 'SQL执行成功',
            details: {
              rowsAffected: response.data.rows_affected || 0
            }
          };
          queryHistory.value.unshift({
            sql: updateForm.value.sql,
            executed_at: new Date().toLocaleString(),
            status: 'success',
            query_type: getQueryType(updateForm.value.sql),
            rows_affected: response.data.rows_affected || 0
          });
          emit('db-operation-completed', {
            success: true,
            operation: 'update',
            sql: updateForm.value.sql,
            rowsAffected: response.data.rows_affected || 0
          });
          updateDialogVisible.value = false;
        } else {
          operationResult.value = {
            success: false,
            message: 'SQL执行失败',
            details: {
              error: response.data.message || '未知错误'
            }
          };
          queryHistory.value.unshift({
            sql: updateForm.value.sql,
            executed_at: new Date().toLocaleString(),
            status: 'failed',
            query_type: getQueryType(updateForm.value.sql),
            error: response.data.message
          });
        }
        resultDialogVisible.value = true;
      } catch (error) {
        if (error !== 'cancel') {
          console.error('执行SQL更新失败:', error);
          ElMessage.error(`执行SQL更新失败: ${error.message || '未知错误'}`);
          queryHistory.value.unshift({
            sql: updateForm.value.sql,
            executed_at: new Date().toLocaleString(),
            status: 'failed',
            query_type: getQueryType(updateForm.value.sql),
            error: error.message
          });
        }
      } finally {
        isExecuting.value = false;
      }
    };
    
    // 辅助函数
    const getQueryType = (sql) => {
      sql = sql.trim().toLowerCase();
      
      if (sql.startsWith('select')) {
        return 'select';
      } else if (sql.startsWith('insert')) {
        return 'insert';
      } else if (sql.startsWith('update')) {
        return 'update';
      } else if (sql.startsWith('delete')) {
        return 'delete';
      } else if (sql.startsWith('create')) {
        return 'create';
      } else if (sql.startsWith('alter')) {
        return 'alter';
      } else if (sql.startsWith('drop')) {
        return 'drop';
      } else {
        return 'other';
      }
    };
    
    const getQueryTypeTag = (type) => {
      const typeMap = {
        'select': 'info',
        'insert': 'success',
        'update': 'warning',
        'delete': 'danger',
        'create': 'success',
        'alter': 'warning',
        'drop': 'danger',
        'other': 'info'
      };
      
      return typeMap[type] || 'info';
    };
    
    const getQueryTypeText = (type) => {
      const typeMap = {
        'select': '查询',
        'insert': '插入',
        'update': '更新',
        'delete': '删除',
        'create': '创建',
        'alter': '修改',
        'drop': '删除',
        'other': '其他'
      };
      
      return typeMap[type] || type;
    };
    
    const truncateSql = (sql) => {
      if (sql.length > 60) {
        return sql.slice(0, 60) + '...';
      }
      return sql;
    };
    
    // 处理标签页点击
    const handleTabClick = async () => {
      if (activeTab.value === 'tables' && tables.value.length === 0) {
        await loadTables();
      }
    };
    
    // 显示表结构对话框
    const showTableDialog = () => {
      tableDialogVisible.value = true;
      selectedTableForBrowse.value = tables.value.length > 0 ? tables.value[0].name : null;
      
      if (selectedTableForBrowse.value) {
        browseTable();
      }
    };
    
    // 显示更新对话框
    const showUpdateDialog = () => {
      updateForm.value.sql = '';
      updateDialogVisible.value = true;
    };

    // 显示查询详情
    const showQueryDetails = (query) => {
      selectedQuery.value = query;
      queryDetailsDialogVisible.value = true;
    };

    // 清空查询编辑器
    const clearQueryEditor = () => {
      currentQuery.value = '';
      queryResult.value = null;
    };
    
    // 初始化
    onMounted(() => {
      loadTables();
    });
    
    return {
      isLoading,
      isExecuting,
      tables,
      selectedTable,
      tableStructure,
      queryHistory,
      currentQuery,
      queryResult,
      tableData,
      tableColumns,
      selectedTableForBrowse,
      selectedQuery,
      activeTab,
      queryDialogVisible,
      tableDialogVisible,
      updateDialogVisible,
      queryDetailsDialogVisible,
      resultDialogVisible,
      resultDialogTitle,
      operationResult,
      isLoadingTableData,
      statusError,
      connectionStatus,
      updateForm,
      updateRules,
      loadTables,
      loadTableStructure,
      browseTable,
      handleNewQuery,
      executeCurrentQuery,
      handleExecuteUpdate,
      getQueryTypeTag,
      getQueryTypeText,
      truncateSql,
      handleTabClick,
      showTableDialog,
      showUpdateDialog,
      showQueryDetails,
      clearQueryEditor
    };
  }
};
</script>

<style scoped>
.database-operations-container {
  margin-bottom: 20px;
}

.database-operations-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}

.repo-path {
  display: flex;
  align-items: center;
  gap: 10px;
}

.repo-path-tag {
  max-width: 400px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.connection-selector {
  display: flex;
  align-items: center;
  gap: 10px;
}

.db-quick-actions {
  margin-bottom: 15px;
}

.db-tabs {
  border: 1px solid #e4e7ed;
  border-radius: 4px;
  padding: 10px;
}

.git-status {
  margin-top: 10px;
}

.status-output {
  background-color: #f5f7fa;
  border: 1px solid #e4e7ed;
  border-radius: 4px;
  padding: 10px;
  white-space: pre-wrap;
  overflow-x: auto;
  font-family: monospace;
  max-height: 400px;
  overflow-y: auto;
}

.action-bar {
  margin-bottom: 15px;
  display: flex;
  gap: 10px;
}

.query-editor-container {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.editor-toolbar {
  display: flex;
  gap: 10px;
  margin-bottom: 5px;
}

.sql-editor {
  margin-bottom: 10px;
}

.query-result {
  margin-top: 15px;
}

.result-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.table-browser {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.table-selection {
  margin-bottom: 10px;
}

.dialog-tip {
  font-size: 0.9em;
  color: #606266;
  margin-top: 5px;
}

.warning-tip {
  color: #e6a23c;
}

.result-success, .result-error {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 15px;
}

.result-icon {
  font-size: 24px;
}

.success {
  color: #67c23a;
}

.error {
  color: #f56c6c;
}

.result-details {
  margin-top: 15px;
  border-top: 1px solid #e4e7ed;
  padding-top: 15px;
}

.result-stdout, .result-stderr {
  margin-top: 10px;
}

.result-stderr {
  color: #f56c6c;
}

pre {
  background-color: #f5f7fa;
  border: 1px solid #e4e7ed;
  border-radius: 4px;
  padding: 10px;
  white-space: pre-wrap;
  overflow-x: auto;
  font-family: monospace;
}

.query-item {
  display: flex;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
  padding: 5px;
  border-radius: 4px;
  transition: background-color 0.2s;
}

.query-item:hover {
  background-color: #f5f7fa;
}

.query-text {
  font-family: monospace;
}

.query-status {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.9em;
}

.error-message {
  color: #f56c6c;
}

.config-action {
  margin-top: 10px;
}

.clone-action {
  margin-top: 10px;
}

.status-info {
  margin-top: 10px;
}
</style> 